<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表评论</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
     <link rel="stylesheet" href="../../css/common.css">
         <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
     <script language="JavaScript" src="../../script/common.js"></script>
<style>
    .cmtform{
        text-align: left;
     }
    .cmtform  .cmt-title{
        line-height: 1.5rem;
        font-size: 0.8rem;
        padding-left: 0.2rem;
        border-bottom: solid #d9d9d9 1px;
     }

    .cmtform .subbtn{
        text-align: center;
        margin-top: 0.4rem;
    }
    .cmtform span{
          margin-left: 0.4rem;
    }
    .cmt-content{
        position: relative;
    }
    .cmt-content .dyninput{
        font-size: 0.4rem;
        position: absolute;
        bottom: 0;
        right: 0.8rem;

    }
    .cmt-content textarea{
        border: solid 1px #d9d9d9;
        margin: 0 0.2rem;
        width: 15rem;
        height: 3rem;
        font-size: 0.6rem;
    }
    .cmt-tag span{
        display: inline-block;
        background-color: #ffeffd;
         font-size: 0.4rem;
        border-radius: 0.2rem;
        line-height: 1rem;
        padding: 0.2rem;
        margin: 0.3rem;
    }

    .cmt-tag .seltag{
        background-color: #e02e24;
        color:#fff;
    }
</style>
</head>
<body>
  <header class="aui-bar aui-bar-nav">
      <a class="aui-pull-left aui-btn" onclick="closewin();">
          <span class="aui-iconfont aui-icon-left"></span>
      </a>
      <div class="aui-title">发表评论</div>
  </header>
<div class="aui-content aui-margin-b-15" style="background-color: #fff" id="cmt-box">
     <div class="cmtform">
         <!-- <div class="cmt-title">发表评论</div> -->
         <div class="cmt-tag">
             <span   :class="{'seltag':item.sel_status}" v-for="item in taglist" @click="settag(item)">{{item.tagname}}</span>
         </div>

             <div class="cmt-content">
                <textarea name="content" maxlength="100"    v-model="content" rows="10" placeholder="请输入评论内容"></textarea>
                <span class="dyninput">{{nowchar}}/100</span>
            </div>
         <div class="subbtn"><span class="aui-btn aui-btn-info" @click="savecmt">保 存</span><span class="aui-btn" @click="goback">返回</span></div>
     </div>

</div>
<script>

    var vm = new Vue({
        el: '#cmt-box',
        data:{
            orderid:'',
            product_id:'',
            nowchar:0,
            content:'',
            taglist:[],
            tagids:[]
        },
        watch:{
            content:function (newcontent) {
                this.nowchar = newcontent.length;
            }
        },
        methods:{
         goback:function () {
             history.go(-1);
         },
            settag:function(item){
             if(item.sel_status===1){
                 item.sel_status=0;
                 removeByValue(vm.tagids,item.id);
             }else{
                 this.tagids.push(item.id);
                 this.tagids = unique_arr(this.tagids);
                 item.sel_status=1;
              }
                vm.taglist = [].concat(vm.taglist);

            },
         savecmt:function () {
             if(!this.content){
               $page.toast("请填写完整内容");

                 return false;
             }
             var tagidstr = this.tagids.join(",");
             $page.get_data('/api/comment/add','post',{orderid:this.orderid,content:this.content,tagids:tagidstr},function (ret) {
                 console.log(ret);
                 if(ret.errno!==1000){
                     toast.fail({
                         title:ret.errmsg,
                         duration:2000
                     });
                 }else{
                   $page.toast('保存成功');
                      //跳转订单列表
                     $page.openwin('home_orderlist','../home/orderlist.html',{});
                }

             });
         },
         load_init:function () {
             $page.get_data('/api/comment/getTags','post',{product_id:this.product_id},function (ret) {
                vm.taglist = ret.data;
                 for(var i in vm.taglist){
                     vm.taglist[i].sel_status =0;
                 }
                 vm.taglist = [].concat(vm.taglist);
             });
         }
        }
        });
        apiready = function() {
          var pageparam = api.pageParam;
          vm.product_id = pageParam.product_id;
          vm.orderid = pageParam.orderid;

          vm.load_init();
        }

</script>
</body>
</html>
